import React,{Component} from 'react'
import { Card,Col, Row,Progress,Image   } from 'antd';
import * as echarts from 'echarts';
import './home.css'
import axios from 'axios'
import api from '../api'

class Home extends Component{
    state={
        dataTime:[], //柱状图横坐标
        saleNum:[],//柱状图纵坐标
        orderAllNum:0,//订单总数
        shopNumber:0,//店铺总数
        shopByDayNumber:0,//今日注册店铺数量
        orderByToday:0,//订单今日数量
        moneySum:0,//总销售额
        shopMax:0,//店铺最大销售金额
        todayMoney:0,//今日销售额
        goodsNumbers:[]//饼状图数据
    }
    //请求首页数据
    getData(){
       return  new Promise((resolve, reject) => {
            axios.get(api.home.home).then(res=>{
                if(res.data.code==200){
                    resolve(res.data)
                }else {
                    reject()
                }
            })
        })
    }
    async componentDidMount() {
       await this.getData().then(res=>{
           console.log(res.data.goodsNumbers)
           let arr=[]
           res.data.goodsNumbers.forEach(item=>{
               arr.push({value:item.goodsNumber,name:item.groupName})
           })
            this.setState({
                dataTime:res.data.dataTime.reverse(),
                saleNum:res.data.weekMoneys,
                orderAllNum:res.data.orderSum,
                shopNumber:res.data.shopNumber,
                shopByDayNumber:res.data.shopByDayNumber,
                orderByToday:res.data.orderByToday,
                moneySum:res.data.moneySum,
                shopMax:res.data.shopMax,
                todayMoney:res.data.todayMoney == null ? 0 : res.data.data.todayMoney,
                goodsNumbers:arr
            })
        })

        //柱状图
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['销售数据']
            },
            xAxis: [
                {
                    type: "category",
                    name: "时间/周",
                    data: this.state.dataTime,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    name: "金额/元",
                    min: 0,
                    max: 5000,
                    interval: 1000,
                    axisLabel: {
                        formatter: '{value} k'
                    }
                }
            ],
            series: [
                {
                    name: '销售数据',
                    type: 'bar',
                    data: this.state.saleNum
                }
            ]
        };
        option && myChart.setOption(option);
        //饼状图
        var chartDom2 = document.getElementById('bintu');
        var myChart2 = echarts.init(chartDom2);
        var option2;
        option2 = {
            title: {
                text: '商品类型数量',
                left: 'center'
            },
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [20, 100],
                    center: ['50%', '42%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: this.state.goodsNumbers
                }
            ]
        };
        option2 && myChart2.setOption(option2);
    }

    render() {
    return(
        <div className='contanir'>
            {/*第一行*/}
            <div className="site-card-wrapper">
                <Row gutter={16}>
                    <Col span={6}>
                        <Card title="今日销售额/元" bordered={false}>
                            <div className='todaySale'>
                                <div>{this.state.todayMoney}</div>
                                <div>
                                    <Image width={40}
                                    src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3300126087,1274636150&fm=26&gp=0.jpg'/>
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="累计销售额/元" bordered={false}>
                            <div className='totalSale'>
                                <p>{this.state.moneySum}</p>
                                <Progress percent={Math.ceil(this.state.shopMax/this.state.moneySum)} showInfo={false} />
                                <div className='totalSaleContent'>
                                    <div>最高店铺销售金额：</div>
                                    <div>￥<span>{this.state.shopMax}</span></div>
                                    <div>&nbsp;&nbsp;占比 <span>{Math.ceil(this.state.shopMax/this.state.moneySum)}%</span></div>
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="今日新注册店铺数" bordered={false}>
                            <div className='totalSale'>
                                <p>{this.state.shopByDayNumber}</p>
                                <Progress percent={this.state.shopByDayNumber} showInfo={false} />
                                <div className='order'>
                                    <div>订单总数：<span>{this.state.orderAllNum}</span></div>
                                    <div>今日订单数量：<span>{this.state.orderByToday}</span></div>
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="累计注册店铺数" bordered={false}>
                            <div className='totalSale'>
                                <p>{this.state.shopNumber}</p>
                                <Progress percent={this.state.shopNumber} showInfo={false} />
                                <div className='totalSaleContent'>
                                    <div>线上付款: <span>{this.state.orderAllNum}</span></div>
                                </div>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </div>
            {/*第二行*/}
            <div className="eachar">
                <Row gutter={16}>
                    <Col span={14}>
                        <Card bordered={false}>
                            <div id='main'>

                            </div>
                        </Card>
                    </Col>
                    <Col span={10}>
                        <Card bordered={false}>
                            <div id='bintu'>

                            </div>
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
    )
}
}
export default Home